<template>
  <div>
    <div>
      <div class="details-content">
        <!-- 身份证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 身份证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">身份证</div>
            <div style="margin-left: 20px;display: flex;flex-wrap: nowrap;justify-content:space-between;width: 90%;">
              <div>
                <h4>正面</h4>
                <div class="info">
                  <div>
                    <el-upload
                      action=""
                      list-type="picture-card"
                      :file-list="frontImgArray"
                      :limit="limitNum"
                      :class="{hide:frontImgEdit}"
                      :before-upload="frontImgListUpload"
                      :on-remove="frontImgListRemove"
                      :on-exceed="exceed"
                    />
                  </div>

                  <div class="sel-button">
                    <el-button class="button" :type="selectFrontSuccess == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="selectFront(1)" />
                    <el-button class="button" :type="selectFrontFail == 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="selectFront(0)" />
                  </div>
                </div>

              </div>
              <div>
                <h4>背面</h4>
                <div class="info">
                  <div>
                    <el-upload
                      action=""
                      list-type="picture-card"
                      :file-list="backImgArray"
                      :on-remove="backImgListRemove"
                      :before-upload="backImgListUpload"
                      :on-exceed="exceed"
                      :limit="limitNum"
                      :class="{hide:backImgEdit}"
                    />
                  </div>
                  <div class="sel-button">
                    <el-button class="button" :type="selectBackSuccess == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="selectBack(1)" />
                    <el-button class="button" :type="selectBackFail == 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="selectBack(0)" />
                  </div>
                </div>
              </div>

            </div>
          </div>
          <!-- 身份证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form
                ref="form"
                :model="detailsFrontForm"
                :rules="detailsFrontRules"
                label-width="120px"
              >
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="手机号：" prop="mobile">
                      <el-input v-model="detailsFrontForm.mobile" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请时间：">
                      <span>{{ detailsFrontForm.lastUpdateTime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="姓名：" prop="name">
                      <el-input v-model="detailsFrontForm.name" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证号：" prop="identityCardId">
                      <el-input v-model="detailsFrontForm.identityCardId" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车队名称：" prop="motorcadeName">
                      <el-input v-model="detailsFrontForm.motorcadeName" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 操作日志 -->
        <div style="height: 260px;">
          <!-- 操作日志 -->
          <div>
            <!-- 审核按钮 -->
            <div class="audit-btn">
              <el-button type="warning" @click="auditPass">审核通过</el-button>
              <el-button type="info" @click="auditNoPass">审核不通过</el-button>
            </div>
          </div>
          <div class="driving-license-title">操作日志</div>
          <div style="margin: 20px;">
            <el-table
              ref="tableKey"
              :data="list"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column type="index" width="50" />
              <el-table-column property="status" label="状态" width="120" />
              <el-table-column property="name" label="操作人" width="120" />
              <el-table-column property="lastUpdateTime" label="操作时间" />
              <el-table-column property="remark" label="备注" />
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">
      <img width="100%" :src="dialogImageUrl" alt="图片未找到">
    </el-dialog>
  </div>
</template>
<script>
import { fileUpload, fileDestroy } from '@/api/common/file'
import { driverMasterAdd, driverMasterDetails, driverMasterAudit } from '@/api/tms/driverMaster'
import { validUserPhone } from '@/utils/validate'

export default {
  data() {
    return {
      frontImgEdit: false,
      backImgEdit: false,
      limitNum: 1, // 图片数量
      tableKey: 0,
      dialogImageUrl: '',
      list: [],
      imgVisible: false,
      selectFrontSuccess: 0,
      selectFrontFail: 0,
      selectBackSuccess: 0,
      selectBackFail: 0,
      frontImgArray: [],
      backImgArray: [],
      detailsFrontForm: {},
      detailsFrontRules: {
        mobile: [{ required: true, message: '请填写手机号码', trigger: 'blur' }],
        frontImgArray: [{ required: true, message: '请上传身份证正面', trigger: 'blur' }],
        backImgArray: [{ required: true, message: '请上传身份证背面', trigger: 'blur' }],
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        identityCardId: [{ required: true, message: '请填写身份证', trigger: 'blur' }],
        motorcadeName: [{ required: true, message: '请填写车队名称', trigger: 'blur' }]
      },
      frontImgIds: [],
      backImgIds: [],
      remark: '', // 审核不通过原因
      params: {}
    }
  },
  created() {
    this.params = this.$route.params
    this.detail()
  },
  methods: {
    selectFront(type) {
      this.selectFrontSuccess = type === 1 ? 1 : 0
      this.selectFrontFail = type === 0 ? 1 : 0
    },
    selectBack(type) {
      this.selectBackSuccess = type === 1 ? 1 : 0
      this.selectBackFail = type === 0 ? 1 : 0
    },
    checkData() {
      // 身份证正面 图片
      const frontImg = this.detailsFrontForm.frontImg
      this.frontImgArray.push({
        url: frontImg,
        status: 'frontImg'
      })
      // 身份证背面 图片
      const backImg = this.detailsFrontForm.backImg
      this.backImgArray.push({
        url: backImg,
        status: 'backImg'
      })
      if (this.frontImgArray.length === 1 && this.backImgArray.length === 1) {
        this.frontImgEdit = true
        this.backImgEdit = true
        this.frontImgIds = [this.detailsFrontForm.frontImg]
        this.backImgIds = [this.detailsFrontForm.backImg]
      } else {
        this.frontImgEdit = false
        this.backImgEdit = false
        this.frontImgIds = []
        this.backImgIds = []
      }
      this.selectFrontSuccess = this.detailsFrontForm.frontCheckStatus === 'SUCCESS' ? 1 : 0
      this.selectFrontFail = this.detailsFrontForm.frontCheckStatus === 'SUCCESS' ? 0 : 1
      this.selectBackSuccess = this.detailsFrontForm.backCheckStatus === 'SUCCESS' ? 1 : 0
      this.selectBackFail = this.detailsFrontForm.backCheckStatus === 'SUCCESS' ? 0 : 1
    },
    detail() {
      driverMasterDetails(this.params.id).then((response) => {
        this.detailsFrontForm = response
        this.checkData()
      })
    },
    // 身份证正面 上传前
    frontImgListUpload(file) {
      console.log('身份证正面', file)
      const formData = new FormData()
      formData.append('file', file)
      formData.append('usage', 'frontImg')
      fileUpload(formData).then((response) => {
        var url = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + response
        this.frontImgArray.push({
          url: url,
          status: 'frontImg',
          id: response
        })
        this.frontImgIds.push(response)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.frontImgEdit = true
        console.log('身份证正面成功', this.frontImgArray)
      })
      return false
    },
    // 身份证正面 删除图片
    frontImgListRemove(file, fileList) {
      if (this.frontImgArray.length === 0) {
        this.fileList = []
      } else {
        const dl = this.frontImgArray.indexOf(file)
        this.frontImgArray.splice(dl, 1)
        const data = {
          ids: this.frontImgIds
        }
        fileDestroy(data).then((response) => {
          this.uploadDisabled = false
          this.frontImgArray = []
          this.$message.error('删除成功')
        })
      }
      this.frontImgEdit = this.frontImgArray.length >= this.limitNum
    },
    // 身份证背面 上传前
    backImgListUpload(file) {
      console.log('上传正面', file)
      const formData = new FormData()
      formData.append('file', file)
      formData.append('usage', 'backImg')
      fileUpload(formData).then((response) => {
        var url = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + response
        this.backImgArray.push({
          url: url,
          status: 'backImg',
          id: response
        })
        this.backImgIds.push(response)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.backImgEdit = true
        console.log('上传图片', this.backImgArray)
      })
      return false
    },
    // 身份证背面 删除图片
    backImgListRemove(file, fileList) {
      if (this.backImgArray.length === 0) {
        this.backImgArray = []
      } else {
        const dl = this.backImgArray.indexOf(file)
        this.backImgArray.splice(dl, 1)
        const data = {
          ids: this.backImgIds
        }
        fileDestroy(data).then((response) => {
          console.log('删除图片', response)
          this.backImgArray = []
          this.$message.error('删除成功')
        })
      }
      this.backImgEdit = this.backImgArray.length >= this.limitNum
    },
    exceed() {
      this.$message.error('最多只能上传1张图片')
    },
    driverMasterAudit(type) {
      const data = {
        'auditInfo': type === 1 ? 'SUCCESS' : 'FALL',
        'id': this.detailsFrontForm.id,
        'name': this.detailsFrontForm.name,
        'mobile': this.detailsFrontForm.mobile,
        'identityCardId': this.detailsFrontForm.identityCardId,
        'motorcadeName': this.detailsFrontForm.motorcadeName,
        'taxPoint': this.detailsFrontForm.taxPoint,
        'frontImg': this.frontImgArray[0].url,
        'backImg': this.backImgArray[0].url,
        'frontCheckStatus': this.selectFrontSuccess === 1 ? 'SUCCESS' : 'FALL',
        'backCheckStatus': this.selectBackSuccess === 1 ? 'SUCCESS' : 'FALL',
        'remark': this.remark
      }
      console.log(data)
      driverMasterAudit(data).then((response) => {
        this.$message({
          type: 'success',
          message: '审核成功!'
        })
        this.$router.go(-1)
      })
    },
    // 审核通过
    auditPass() {
      console.log('审核状态  通过', this.auditInfo)
      this.$confirm('是否确认审核通过?', '提示', {
        title: '审核通过',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.driverMasterAudit(1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        })
      })
    },
    // 审核不通过
    auditNoPass() {
      console.log('审核状态  不通过', this.auditInfo)
      this.$prompt('不通过原因', '提示', {
        title: '审核不通过',
        inputPlaceholder: '请输入不通过理由',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '输入不能为空',
        inputValidator: (value) => {
          if (!value) {
            return '输入不能为空'
          }
        } }).then((value) => {
        this.remark = value.value
        this.driverMasterAudit(0)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消不通过'
        })
      })
    }
  }
}
</script>
<style lang="scss">
.hide .el-upload--picture-card {
	display: none;
}
.details-content {
	border: 1px solid #E4E4E4;
	width: 95%;
	margin: 0 auto;
	height: 1150px;
}
.driving-license-left {
	border-bottom: 1px solid #E4E4E4;
	border-right: 1px solid #E4E4E4;
	width: 40%;
}
.driving-license-title {
	border-left: 2px solid #FFB500;
	width: 100px;
	text-align: center;
	font-size: 16px;
	margin: 20px;
}
.driving-license-right {
	border-bottom: 1px solid #E4E4E4;
    width: 60%;
}
.audit-btn{
	text-align: center;
	padding: 20px;
}
.info{
	display: flex;
	.sel-button{
		display: grid;
		justify-items: center;
		align-items: center;
		.button{
			margin-left: 10px;
			width: 30px;
			height: 30px;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 20px;
		}
	}
}
</style>
